<template>
    <el-card class="box-card">
        <el-form label-width="150px" style="margin-left:10px;margin-bottom: 100px;">
            <el-form-item label="密码">
                <el-col :span="12">
                    <el-input v-model="form.password" show-password/>
                </el-col>
            </el-form-item>
            <el-form-item label="确认密码">
                <el-col :span="12">
                    <el-input v-model="repassword" v-on:keyup="checkRepassword" show-password/>
                    <span id="passwordNotMatch" style="color: #F56C6C;display:none">两次密码不一致</span>
                </el-col>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" :disabled="isdisabled"
                    style="position: absolute; left: 10px;">修改</el-button>
                <el-button style="position: absolute; left:90px;">关闭</el-button>
            </el-form-item>
        </el-form>

        <!-- 提交之后的反馈弹窗 -->
        <el-dialog v-model="dialogFormVisible" title="提示" customClass="customWidth">
            <span>修改成功</span>
            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
                </span>
            </template>
        </el-dialog>
    </el-card>
</template>

<script>
import axios from "axios";
export default {
    data() {
        return {
            form: {
                phonenumber: 0,
                password: "",
            },
            dialogFormVisible: false,
            repassword: "",
            isdisabled: true
        }
    },
    mounted() {
        this.form.phoneNumber = this.$store.state.userAccount;
    },
    methods: {
        checkRepassword() {
            this.isdisabled = true;
            let password = this.form.password;
            let display = document.getElementById("passwordNotMatch").style.display;
            if (this.repassword != password) {
                document.getElementById("passwordNotMatch").style.display = "inline-block";
                return;
            }
            document.getElementById("passwordNotMatch").style.display = "none";
            this.isdisabled = false;

        },
        onSubmit() {
            const formData = JSON.stringify(this.form)
            axios.post("/api/user/updatePassword", formData, {
                headers: {
                    'Content-Type': 'application/json'
                }
            })
                .then(res => {
                    console.log("提交成功", res.data);
                })
                .catch(error => {
                    console.error("发送失败", error);
                })
        }
    },
    watch: {
        form: {
            handler(newitem,olditem) {
                if(this.isdisabled==true){
                    return;
                }
                this.isdisabled=true;
            },
            deep: true
        }

    }

}
</script>

<style scoped>
.customWidth {
    width: 35% !important;
}

.box-card {
    width: 60%;
}

#passwordNotMatch {
    position: absolute;
    left: 220px;
}
</style>